<template>
  <view class="privacy-pof">
    <view class="por">
      <u-checkbox
        activeColor="#F0250E"
        v-model="checked"
        shape="circle"
        label=""
      ></u-checkbox>
      <!-- #ifdef MP-WEIXIN -->
      <view class="ts" v-if="!checked"> 请先阅读并勾选使用协议 </view>
      <!-- #endif --> </view
    ><view
      >我已经阅读并同意<text
        @click.stop="
          $utils.toUrl('/user/my/article-detail?id=' + stores.client_service_id)
        "
        >《服务条款》</text
      >与<text
        @click.stop="
          $utils.toUrl('/user/my/article-detail?id=' + stores.client_privacy_id)
        "
        >《隐私政策》</text
      ></view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  methods: {
    hasChecked() {
      if (!this.checked) {
        this.$u.toast("请阅读并同意服务条款和隐私政策");
        return false;
      }

      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
.por {
  position: relative;
}

.privacy-pof {
  position: fixed;
  left: 0;
  bottom: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  font-size: 24rpx;
  color: #262626;

  text {
    color: #f0250e;
  }

  .ts {
    position: absolute;
    left: -54rpx;
    top: -90rpx;
    padding: 16rpx;
    white-space: nowrap;
    font-size: 28rpx;
    color: #fff;
    background: rgba(32, 32, 32, 0.92);
    border-radius: 16rpx;

    &:before {
      content: "";
      position: absolute;
      top: 100%;
      left: 60rpx;
      width: 0;
      height: 0;
      border-left: 16rpx solid transparent;
      border-right: 16rpx solid transparent;
      border-top: 14rpx solid rgba(32, 32, 32, 0.92);
    }
  }
}
</style>
